<template>
  <a-modal
    :open="visibleModal"
    :footer="null"
    centered
    width="778px"
    style="height: 680px"
    title="授权记录"
    class="edit-modal-12"
    @cancel="handleCancel"
  >
    <div class="modal-wrap h-585">
      <div class="title">{{ detailInfo?.onlineId }}_{{ detailInfo?.algoName }}_{{ detailInfo?.version }}</div>
      <a-spin :spinning="loading" tip="数据加载中">
        <a-table
          :columns="tableColumns"
          :scroll="scroll"
          class="header-right-angle admin-table online-service-table-dynamic-scroll"
          :data-source="dataSource"
          :loading="loading"
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'recordIdentity'">
              {{ getRecordIdentity(record.recordIdentity) }}
            </template>
            <template v-if="column.dataIndex === 'changeItemList'">
              <ul class="list">
                <li
                  v-for="(item, index) in record.changeItemList"
                  :key="index"
                  :title="`${item.name} ${item.oldValue || '/'} → ${item.newValue}`"
                >
                  {{ item.name }} {{ item.oldValue || '/' }} → {{ item.newValue }}
                </li>
              </ul>
            </template>
          </template>
        </a-table>
      </a-spin>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'

  import { useTableScroll } from '@/hooks/use-table-scroll'
  import { authApi } from '@/services/api'
  import { filterTableColumns } from '@/utils/ant-component'

  import { getRecordIdentity } from '../../common'
  import { AuthRecord } from '../../types/online-service'
  import { AuthApiDetail } from '../../types/online-service'

  const visibleModal = ref(false)
  const loading = ref<boolean>(false)
  const detailId = ref<string>('')
  const { getTableScrollHeight } = useTableScroll()

  // 表格
  const tableColumns = ref(
    filterTableColumns([
      {
        title: '发起人',
        dataIndex: 'initiator',
        width: 80
      },
      {
        title: '身份',
        dataIndex: 'recordIdentity',
        width: 80
      },
      {
        title: '变更项',
        dataIndex: 'changeItemList'
      },
      {
        title: '授权时间',
        dataIndex: 'empowerTime',
        width: 200
      }
    ])
  )
  const dataSource = ref<AuthRecord[]>()
  const getAuthRecord = async (id: string) => {
    try {
      loading.value = true
      const { data } = await authApi.getAuthRecord(id)()
      dataSource.value = data as AuthRecord[]
      loading.value = false
    } catch (error) {
      loading.value = false
    }
  }

  const detailInfo = ref<AuthApiDetail>()

  const tbodyHeight = ref(0)
  const scroll = computed(() => {
    const maxHeight = 540
    return {
      y: tbodyHeight.value > maxHeight ? maxHeight : undefined
    }
  })

  const openModal = async (id: string, info: Record<string, any>) => {
    detailId.value = id
    visibleModal.value = true
    detailInfo.value = info
    await getAuthRecord(id)
    tbodyHeight.value = await getTableScrollHeight('.online-service-table-dynamic-scroll')
  }

  const handleCancel = () => {
    detailId.value = ''
    visibleModal.value = false
  }

  defineExpose({
    openModal,
    handleCancel
  })
</script>

<style lang="less" scoped>
  @import '../../styles/common.less';

  .list {
    display: flex;
    flex-direction: column;

    > li {
      border-bottom: 1px solid @border1;
      line-height: 22px;
      padding: 12px 0;
      .elliptical-1();

      &:last-child {
        border-bottom: none;
      }
    }
  }
</style>
